<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="description" content="使用sheetjs读取和导出excel示例">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div id="index">

			<div class="container">
				<div class="mt-sm">
					<input type="file" id="file" style="display:none;" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
				</div>

				<!--<p>结果输出：（下面表格可直接编辑导出）</p>-->
				<!--<div id="result" contenteditable></div>-->
				<!--系统名称-->
				<div class="systematicName">
					信息管理系统
				</div>
				<div class="input_box">
					<div id="name1">
						<!--回车键 @keyup.enter.native="search()" -->
						<el-input placeholder="请输入内容" id="" v-model="name1val" clearable @keyup.enter.native="search()"></el-input>
					</div>
					<div class="searchcss" @click="search()">搜索</div>
				</div>
				<!------------->

				<!------------->
				<!--<div id="thisul"></div>-->
				<template>
					<el-table :data="tableData" border style="width: 100%;" :row-class-name="tableRowClassName" :header-cell-class-name="headerStyle">
						<!--<el-table :data="tableData" border style="width: 100%;">-->
						<el-table-column prop="档案柜编号" label="档案柜编号" align="center" width="80"> </el-table-column>
						<el-table-column prop="档案柜的小柜子编号" label="档案柜的小柜子编号" align="center" width="100"> </el-table-column>
						<el-table-column prop="档案柜号" label="档案柜号" align="center" width="100"> </el-table-column>
						<!--<el-table-column prop="code" label="代码" align="center" width="100"> </el-table-column>-->
						<el-table-column prop="年度" label="年度" align="center" width="100"> </el-table-column>
						<!--<el-table-column prop="retentionPeriod" label="保管期限" align="center" width="100"> </el-table-column>-->
						<el-table-column prop="最终件号" label="最终件号" align="center" width="100"> </el-table-column>
						<!--<el-table-column prop="serialNumber" label="序号" align="center" width="100"> </el-table-column>-->
						<el-table-column prop="档号" label="档号" align="center" width="240"> </el-table-column>
						<el-table-column prop="文件号" label="文件号" align="center" width="100"> </el-table-column>
						<el-table-column prop="责任者" label="责任者" align="center" width="280"> </el-table-column>
						<el-table-column prop="题名" label="题名" align="center" width=""> </el-table-column>
						<el-table-column prop="日期" label="日期" align="center" width="100"> </el-table-column>
						<el-table-column label="操作" align="center" width="200">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

				</template>
				<!--编辑弹窗-->
				<el-dialog title="编辑信息" center :visible.sync="outerVisible">

					<el-input placeholder="请输入内容" id="" v-model="name1val" clearable @keyup.enter.native="search()"></el-input>
					<!--<el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
						<div slot="footer" class="dialog-footer">
							<el-button @click="outerVisible = false">取 消</el-button>
							<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
						</div>
					</el-dialog>-->
					<div slot="footer" class="dialog-footer">
						<el-button @click="outerVisible = false">取 消</el-button>
						<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
					</div>
				</el-dialog>

				<!--分页 器-->
				<div class="paging">
					<template>
						<el-pagination @size-change='handleSizeChange' sizePage background boolean @current-change='handleCurrentChange' :page-sizes="[20,50,100, 200, 300, 400]" :current-page='queryInfo.pagenum' :page-size='queryInfo.pagesize' layout='sizes,prev,pager,next' :total='total'>
						</el-pagination>
					</template>
				</div>

			</div>
			<button @click="lll">222</button>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/xlsx.mini.min.js"></script>
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<script src="js/vue/vue.js"></script>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/element/index.css">
		<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
		<!-- 引入组件库 -->
		<script src="js/element/index.js"></script>
		<!--转表格的js-->
		<script src="js/alasql.js"></script>
		<script src="js/xlsx.core.min.js"></script>
		<script type="text/javascript">
			// 创建vue实例化对象
			var vm = new Vue({
				el: '#index',
				data: {
					// 分页器
					queryInfo: {
						pagenum: 1, //当前页数
						pagesize: 20 //每页条数
					},
					total: 0, //总条目数
					// 数据创建
					mydata: "",
					name1val: "值班室工程图纸",
					tableData: [],
					allData: [],
					//					outerVisible: false,
					outerVisible: false,
					innerVisible: false

				},
				methods: {
					handleEdit(index, row) {
						console.log(index, row);
						this.outerVisible = true
					},

					// 分页器++++++++
					getCateList() {
						console.log(this.queryInfo.pagenum, "页码")
						console.log(this.queryInfo.pagesize, "条数")
						this.sorterFun()
					},
					handleSizeChange(val) {
						this.queryInfo.pagesize = val;
						this.getCateList()
					},
					handleCurrentChange(val) {
						this.queryInfo.pagenum = val;
						this.getCateList()
					},
					//表的样式-----------
					headerStyle({
						row,
						column,
						rowIndex,
						columnIndex
					}) {
						return 'tableStyle'
					},
					//					 创建方法函数
					tableRowClassName({
						row,
						rowIndex
					}) {
						if(rowIndex % 2 == 1) {
							return 'warning-row';
						} else if(rowIndex % 2 == 3) {
							return 'success-row';
						}
						return '';
					},
					//表的样式-----------
					loadRemoteFile(url) {
						console.log(url)
						let thi_ = this
						this.readWorkbookFromRemoteFile(url, function(workbook) {
							thi_.readWorkbook(workbook);
						});
					},
					readWorkbookFromLocalFile(file, callback) {
						var reader = new FileReader();
						reader.onload = function(e) {
							var data = e.target.result;
							var workbook = XLSX.read(data, {
								type: 'binary'
							});
							if(callback) callback(workbook);
						};
						reader.readAsBinaryString(file);
					},
					// 从网络上读取某个excel文件，url必须同域，否则报错
					readWorkbookFromRemoteFile(url, callback) {
						var xhr = new XMLHttpRequest();
						xhr.open('get', url, true);
						xhr.responseType = 'arraybuffer';
						xhr.onload = function(e) {
							if(xhr.status == 200) {
								var data = new Uint8Array(xhr.response)
								var workbook = XLSX.read(data, {
									type: 'array'
								});
								if(callback) callback(workbook);
							}
						};
						xhr.send();
					},
					readWorkbook(workbook) {
						var sheetNames = workbook.SheetNames; // 工作表名称集合
						var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
						var csv = XLSX.utils.sheet_to_csv(worksheet);
						this.mydata = csv.split('\n')
						this.mydata.pop(); // 最后一行没用的
						this.getLoadS()

					},
					//加载
					getLoadS() {
						let this_ = this
						this.total = this.mydata.length;
						this.mydata.forEach(function(row, idx) {
							let ovr = {}
							var columns = row.split(',');
							ovr['档案柜编号'] = columns[0];
							ovr['档案柜的小柜子编号'] = columns[1];
							ovr['档案柜号'] = columns[2];
							//							ovr['code'] = columns[3];
							ovr['年度'] = columns[4];
							//							ovr['retentionPeriod'] = columns[5];
							ovr['最终件号'] = columns[6];
							//							ovr['serialNumber'] = columns[7];
							ovr['档号'] = columns[8];
							ovr['文件号'] = columns[9];
							ovr['责任者'] = columns[10];
							ovr['题名'] = columns[11];
							ovr['日期'] = columns[12];
							this_.allData.push(ovr)

						});
						this.sorterFun()
					},
					//分页器 处理
					sorterFun() {
						this.tableData = []

						//开始 位置
						let begin = 0
						if(this.queryInfo.pagenum != 1) {
							begin = (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize;
						}
						//结束 位置
						let end = this.queryInfo.pagesize * this.queryInfo.pagenum;
						console.log(`展示${begin}至${end-1}条`)
						this.tableData = this.allData.slice(begin, end)
					},
					//搜索
					search() {
						this.queryInfo.pagenum = 1
						let this_ = this
						this.allData = []
						this.mydata.forEach(function(row, idx) {
							if(row.indexOf(this_.name1val) >= 0) {
								let ovr = {}
								var columns = row.split(',');
								columns.forEach(function(row, index) {
									ovr['档案柜编号'] = columns[0];
									ovr['档案柜的小柜子编号'] = columns[1];
									ovr['档案柜号'] = columns[2];
									//							ovr['code'] = columns[3];
									ovr['年度'] = columns[4];
									//							ovr['retentionPeriod'] = columns[5];
									ovr['最终件号'] = columns[6];
									//							ovr['serialNumber'] = columns[7];
									ovr['档号'] = columns[8];
									ovr['文件号'] = columns[9];
									ovr['责任者'] = columns[10];
									ovr['题名'] = columns[11];
									ovr['日期'] = columns[12];
								});
								this_.allData.push(ovr)

							}
						})
						console.log("--搜索到--", this.allData.length, "条数据")

						this.total = this.allData.length;
						this.sorterFun()
						this.$notify({
							title: '搜索完成!',
							type: 'success'
						});
					},
					lll() {
						alasql('SELECT * INTO XLS("data.xlsx",{headers:true}) FROM ?', [this.allData]);
					}

				},
				mounted() {
					// 页面初始化调用
					document.getElementById('file').addEventListener('change', function(e) {
						var files = e.target.files;
						console.log(files, "---------")
						if(files.length == 0) return;
						var f = files[0];
						if(!/\.xlsx$/g.test(f.name)) {
							alert('仅支持读取xlsx格式！');
							return;
						}
						this.readWorkbookFromLocalFile(f, function(workbook) {
							this.readWorkbook(workbook);
						});
					});
					this.loadRemoteFile('data.xlsx');
				}
			})
		</script>

	</body>
	<style type="text/css">
		.tableStyle {
			background-color: #1989fa!important;
			color: #fff;
			font-weight: 400;
		}
		
		.el-table .warning-row {
			background: oldlace;
		}
		
		.el-table .success-row {
			background: #f0f9eb;
		}
	</style>

</html>